<template>
	<view class="shop-page">
		<!-- 积分商城标题 -->
     <!--
		<view class="shop-header-section">
			<view class="shop-title-section">
				<text class="shop-title">积分商城</text>
			</view>
		</view>
		-->
		<!-- 商城图片 -->
		<view class="shop-image-container">
			<image src="https://static.lixingpt.com/lxzl/20250826/1756190390498-f305a72e-cf43-455f-93e0-4f70cc3269f5.png" class="shop-image" mode="aspectFit" />
		</view>
		
		<!-- Tabbar -->
		<smart-tabbar></smart-tabbar>
	</view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'

export default {
	name: 'Shop',
	components: {
		SmartTabbar
	},
	data() {
		return {}
	},
	onLoad() {
		console.log('积分商城页面加载完成');
	}
}
</script>

<style scoped>
.shop-page {
	min-height: 100vh;
}

/* 积分商城标题样式 - 参考indexDemo的利行充电样式 */
.shop-header-section {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
	margin-top: 20rpx;
}

.shop-title-section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 0 30rpx; /* 去掉右外距，只保留左外距 */
	height: 100rpx;
}

.shop-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

/* 商城图片容器 */
.shop-image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1; /* 放在最底层 */
}

.shop-image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 撑满容器 */
}
</style>
